<template>
	<view class="warp" v-if="row.id">
		<!-- 顶部 start -->
		<!-- #ifdef WEB -->
		<view class="navbar_top">
			<uv-navbar leftText="返回" :fixed="false" :title="title" border :safeAreaInsetTop="false" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<uv-icon name="arrow-left" size="19"></uv-icon>
					</view>
				</template>
				<template v-slot:right>
					<view class="uv-nav-slot">
						<uv-icon name="home" size="19"></uv-icon>
					</view>
				</template>
			</uv-navbar>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<uv-navbar leftText="返回" :fixed="true" title="课程详情" border :safeAreaInsetTop="true" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
				</view>
			</template>
			<template v-slot:right>
				<view class="uv-nav-slot">
					<uv-icon name="home" size="19"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<!-- #endif -->
		<!-- 顶部 end -->
		<view class="d_box" :style="row.lesson_data && row.lesson_data.type == 1 && row.lesson_data.password==='' ?'position: fixed;':'position: relative;'">
			<!-- 课程盒子 start -->
			<view class="kc_box" v-if="row.lesson_data && row.lesson_data.password===''">
				<!-- 视频播放 start -->
				<!-- 文章 start -->
				<view class="text_box" v-if="row.lesson_data.type == 3">
					<uv-parse :content="row.lesson_data.content"></uv-parse>
				</view>
			</view>
				<!-- 文章 end -->
			<view class="kc_none" v-else-if="row.lesson_data && row.lesson_data.password===1">
				<image :src="IMG_URL + 'login_img.png'" mode="aspectFit"></image>
				<view class="lesson_password">
					<uv-input placeholder="请输入密码" border="bottom" type="password" color="crimson" v-model="lesson_password"></uv-input>
					<uv-button type="primary" text="验证" @click="open_lock"></uv-button>
				</view>
			</view>
			<view class="kc_none" v-else>
				<image :src="row.image" mode="widthFix"></image>
				<!-- <view class="none_text">
					暂无课程...
				</view> -->
			</view>
			<!-- 课程盒子 end -->
		</view>
		<!-- box1 start -->
		<view class="box1" v-show="subsection_current == 0">
			<view class="title_box">
				<view class="title_text">
					{{row.name}}
				</view>
				<view class="course_num">
					培训时间：{{row.start_date}} -  {{row.end_date}}
				</view>
				<view class="course_other">					
					<view class="course_num">
						(共{{row.lesson_num}}个课程)
					</view>
					<!-- Check if the study status is 1 and test status is available -->
					<view class="course_kaoshi" v-if="(row.status === 'wait_test' || row.status === 'no_pass') && row.test_data" @click="jumpUrl(`/exam/pages/room/detail?id=${row.test_data}`, 'redirectTo')">
					  考试
					</view>
				
					<!-- Check if the study status is finished -->
					<view class="course_kaoshi" v-else-if="row.status === 'study_finished'">
					  完成课程
					</view>
				
					<!-- Check if the study status is finished -->
					<view class="course_kaoshi" v-else-if="row.status === 'completed'">
					  完成学习
					</view>
				
					<!-- Check if cert_status is 1 (certified) -->
					<view class="course_kaoshi" v-else-if="row.status === 'issued'">
					  已颁发证书
					</view>
				</view>
			</view>
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
			<!-- 课程介绍 start -->
			<view class="course_box">
				<view class="course_title">
					<view class="title_text">
						培训介绍
					</view>
				</view>
				<view class="course_info">
					<uv-parse :content="row.content"></uv-parse>
				</view>
			</view>
			<!-- 课程介绍 end -->
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
		</view>
		<!-- box1 end -->
		<!-- box2 start -->
		<view class="box2">
			<view class="course_box">
				<view class="course_title">
					<view class="title_text">
						课程列表
					</view>
				</view>
				<view class="course_list">
					<view class="course_item" v-for="(v,k) in row.lesson_rows" :key="k" @click="jumpUrl(`/pages/course/details?id=${v.id}`,'redirectTo')">
						<view class="course_img">							
							<image :src="BASE_URL+v.image" mode="aspectFill"></image>
						</view>
						<view class="item_title line_1">
							{{v.name}}
						</view>			
						<!-- <view class="item_status" :class="'status_' + v.status">
							完成
						</view> -->
					</view>
				</view>
			</view>
			
		</view>
		<!-- box2 end -->
		<!-- box3 start -->
		<view class="box3" v-show="subsection_current == 2">
			<uv-gap height="10" bgColor="#fff"></uv-gap>
			<view class="push_box">
				<uv-input placeholder="在此处输入内容,请文明发言" border="bottom" v-model="danmuValue"></uv-input>
				<view class="push_btn">
					<uv-button text="发布" type="primary" @click="sendDanmu"></uv-button>
				</view>
			</view>
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
			<view class="msg_box">
				<view class="msg_title">
					<view class="title_icon">
						<image :src="IMG_URL+'zhangjie.png'" mode="aspectFit"></image>
					</view>
					<view class="title_text">
						<text>{{subsection[2]}}</text>列表
					</view>
				</view>
				<view class="push_list">
					<view class="push_item" v-for="(v,k) in msg_rows" :key="k">
						<view class="item_img">
							<image :src="v.avatar" mode="aspectFill"></image>
						</view>
						<view class="item_t">
							<view class="item_content">
								<view class="username">
									{{v.nickname}}
								</view>
								<view class="content">
									{{v.content}}
								</view>
							</view>
							<view class="item_time">
								{{customDate("Y-m-d H:i",v.createtime)}}
							</view>
						</view>
					</view>
					<uv-load-more :status="apiStatus" dashed line />
				</view>
			</view>
			
		</view>
		<!-- box3 end -->
		<uv-gap height="80rpx" bgColor="#F1F1F5"></uv-gap>
		<!-- 底部板块 start -->
		<view class="bottom_box">
			<view class="bottom_box_warp">
				<!-- <view class="bottom_box_l">
					<view class="img" @click="collect()" v-if="row_collect == 0">
						<uv-icon name="heart" color="#f5454d" size="24"></uv-icon>
						收藏
					</view>
					<view class="img" @click="collect()" v-else>
						<uv-icon name="heart-fill" color="#f5454d" size="24"></uv-icon>
						已收藏
					</view>
				</view> -->
			</view>
			<view class="bottom_box_zw"></view>
		</view>
		<!-- 底部板块 end -->
		<!-- 考试弹出层 start -->
		<uv-overlay :show="test_show">
			<view class="test_warp">
				<view class="test_box" @tap.stop>
					<view class="test_close" @click="test_show = false">
						<uv-icon name="close-circle" color="#2979ff" size="50rpx"></uv-icon>
					</view>
					<view class="test_list">
						<view class="test_item" v-for="(v,k) in row.test_data" :key="k" @click="test_show = false;jumpUrl('/exam/pages/room/detail?id='+v.id)">
							<view class="item_l">
								<image :src="IMG_URL+'test.png'" mode="aspectFit"></image>
							</view>
							<view class="test_r line_2">
								{{v.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uv-overlay>
		<!-- 考试弹出层 end -->
		<!-- 复制弹出层 start -->
		<uv-modal ref="copy_modal" title="提示" content="不支持在小程序直接打开，请复制后，到浏览器中打开。" confirmText="复制" showCancelButton buttonReverse @confirm="copy_confirm"></uv-modal>
		<!-- 复制弹出层 end -->
		
		<uv-popup ref="certPopup" :closeOnClickOverlay="false"  round="10">
			<view class="cert-content">
				<view class="btn-close cuIcon-close" @click="handleCertClose"></view>
				<view class="top">
					<i class="icon cuIcon-roundcheck"></i>
					<text class="text">您已完成了培训</text>
				</view>
				<view class="center">
					恭喜您获得了培训证书
				</view>
				<view class="bottom">
					<view class="btn" @click="handleCertDetail">查看</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		onReachBottom() {
			console.log('onReachBottom')
			if(this.subsection_current == 2){
				this.page++
				this.msgSearch()
			}
		},
		data() {
			return {
				domain: this.$BASR_URL,
				test_show: false,
				src: '',
				intervalId: null,
				/***** 弹幕 start *****/
				danmuList: [],
				danmuValue: '',
				currentTime: 0,// 初始化当前播放时间为0秒
				/***** 弹幕 end *****/
				// 分段器
				// subsection: ['详情','目录','弹幕'],
				subsection: ['详情','课程列表'],
				subsection_current: 0,
				// 
				course_id: '',
				lesson_id: '',
				row: {},
				msg_rows: [],
				record_log: {},
				// 
				page: 1,
				pagesize: 10,
				apiMore: true,
				apiStatus: 'loadmore',
				apiPost: false,
				row_collect: 0,
				
				audioAction: {
					method: 'pause'
				},
				lesson_password: '',
				lesson_lock: 'none',
				IMG_URL: this.$IMG_URL,
				BASE_URL: this.$BASE_URL,
				copy_url: "",
				
				// 标题
				title: '',
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onLoad(options) {
			this.course_id = options.id
			this.lesson_id = options.lesson_id ? options.lesson_id : 0
			
			this.get_course()
		},
		onHide() {
			if(this.intervalId){
				clearInterval(this.intervalId)
				this.intervalId = null
			}
		},
		onUnload() {
			if(this.intervalId){
				clearInterval(this.intervalId)
				this.intervalId = null
			}
		},
		methods: {
			// 禁用视频拖动功能
			disableVideoSeek() {
				// 确保用户无法拖动视频进度条
				if (this.videoContext) {
					this.videoContext.seek(this.currentTime); // 始终将视频时间设置为当前时间
				}
			},
			async record_time() {
				const res = await this.$myRequest({
					url: "course/record_time",
					type: "post",
					data: {course_id:this.course_id,lesson_id:this.lesson_id}
				});
				if(res.code){
					this.record_log = res.data
					this.intervalId = setInterval(()=>{this.set_record_log()},10000);
				}
			},
			set_record_log(){
				var that = this
				uni.request({
					url: this.$BASE_URL + this.$API_URL + 'course/record_log?token=' + uni.getStorageSync("userInfo").token || "",
					data: {...this.record_log},
					method:"POST",
					success(res) {
						console.log(res.data)
						if(res.data.code){							
							that.record_log.time = res.data.data.time
							that.record_log.signature = res.data.data.signature;
						}
					}
				})
			},
			async get_course() {
				const res = await this.$myRequest({
					url: "planning/details",
					type: "post",
					data: {id:this.course_id,lesson_id:this.lesson_id,lesson_password:this.lesson_password}
				});
				if(res.code){
					this.row = res.data;
					console.log('row=========', this.row);
					this.row_collect = res.data.collect
					// this.subsection[2] = res.data.lesson_data && res.data.lesson_data.type == 1 && res.data.lesson_data.file_type != 2 ? '弹幕' : '评论'; 
					this.msg_rows = res.data.msg_data
					this.danmuList = res.data.danmuList
					if(this.danmuList.length == 0 && this.page == 1){
						this.apiStatus = 'nomore'
					}
					this.lesson_id = res.data.lesson_data ? res.data.lesson_data.id : 0
					this.lesson_lock = res.data.lesson_data ? res.data.lesson_data.lesson_lock : 'none'
					
					if(this.course_id ){
						this.record_time()
					}
					
					// 设置标题
					this.title = res.data.name || '课程详情';
					
					// 是否弹出层
					this.setCertPopup(this.row);
				}
			},
			
			/**
			 * 设置是否弹出层
			 */
			setCertPopup(item) {
				const { issue_cert } = item;
				
				if (issue_cert == 1) {
					this.$nextTick(() => {
						this.$refs.certPopup.open('center');
					})
				}
			},		
						
			async get_planning() {
			    const res = await this.$myRequest({
			        url: "planning/details",
			        type: "post",
			        data: {
			            course_id: this.course_id
			        }
			    });
			
			    if (res.code) {
			        // 设置计划相关的数据
			        this.data = res.data;
			
			        // 假设返回的结果中有一个 `course_list`，它包含了课程的列表
			        this.course_list = res.data.course_list || [];
			
			        // 如果课程列表为空，设置状态为没有更多课程
			        if (this.course_list.length === 0 && this.page === 1) {
			            this.apiStatus = 'nomore';
			        }
			
			        // 可以在此进行其他处理，比如记录课程的某些属性等
			        console.log('课程列表:', this.course_list);
			    }
			},
			// 收藏
			async collect() {
				const res = await this.$myRequest({
					url: "course/collect",
					type: "post",
					data: {course_id:this.course_id,lesson_id:this.lesson_id,collect:this.row_collect},
					showToast: 2
				});
				if(res.code){
					this.collect_status()
				}
			},
			// 查询收藏状态
			async collect_status() {
				const res = await this.$myRequest({
					url: "course/collect_status",
					type: "post",
					data: {course_id:this.course_id},
				});
				if(res.code){
					this.row_collect = res.data.collect_status
				}
			},
			// 留言列表
			async msgSearch() {
				if (this.apiPost || this.apiMore===false) {
					return false
				}
				const res = await this.$myRequest({
					url: "msg/msgSearch",
					type: "post",
					data: {course_id:this.course_id,lesson_id:this.lesson_id,page:this.page},
				});
				if(res.code){
					this.apiMore = res.data.length < this.pagesize ? false : true
					this.apiStatus = res.data.length < this.pagesize ? "nomore" : "loadmore";
					this.msg_rows = this.msg_rows.length > 0 ? [...this.msg_rows, ...res.data] : res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
					this.apiMore = false
					this.apiStatus = 'nomore'
				}
			},
			// 发布留言
			async msgAdd() {
				if(!this.lesson_id){
					uni.showToast({
						icon: 'none',
						title: "操作失败，该课程还没章节"
					})
					return false
				}
				const res = await this.$myRequest({
					url: "msg/msgAdd",
					type: "post",
					data: {
						course_id:this.course_id,lesson_id:this.lesson_id,content:this.danmuValue,
						second:this.currentTime
					},
				});
				if(res.code){
					this.page = 1
					this.pagesize = 10
					this.apiMore = true
					this.apiStatus = 'loadmore'
					this.apiPost = false
					this.msg_rows = []
					this.msgSearch()
				}
				uni.showToast({
					icon:'none',
					title: res.msg
				})
			},
			// 复制下载地址
			copyUrlFile(text) {
				this.copy_url = text
				this.$refs.copy_modal.open()
			},
			copy_confirm() {
				uni.setClipboardData({
					data: this.copy_url,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: "复制成功,请到浏览器中打开"
						})
					},
					fail: function () {
						uni.showToast({
							icon: 'error',
							title: '复制失败'
						})
					}
				});
			},
			/***** 弹幕 start *****/
			sendDanmu: function() {
				// 视频才有弹幕
				if(this.row.lesson_data && this.row.lesson_data.type == 1){
					console.log('弹幕提交')
					this.videoContext.sendDanmu({
						text: this.danmuValue,
						color: this.getRandomColor()
					});
				}
				// 
				this.msgAdd()
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			handleTimeUpdate(event) {
				// 获取当前播放时间
				this.currentTime = event.detail.currentTime
			},
			/***** 弹幕 end *****/
			// 分段器
			subsection_change(index) {
				this.subsection_current = index;
			},
			// 学习
			study() {
				if(this.row.lesson_rows)
					 // 通过 Vue Router 跳转
					 this.$router.push({ path: `/pages/course/details?id=` + this.row.lesson_rows[0].id })
					 
				if(this.row.lesson_data.type == 1){
					// 播放
					let videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video
					videoContext.play();
				} else if(this.row.lesson_data.type == 3){
					// 返回顶部 阅读
					uni.pageScrollTo({
						scrollTop: 0
					})
				} else if(this.row.lesson_data.type == 2) {
					// 播放
					let audioContext = uni.createAudioContext('myAudio');
					audioContext.play();
				} else if(this.row.lesson_data.type == 4) {
					console.log('pdf 不做处理')
				}
			},
			// 验证密码
			async open_lock() {
				const res = await this.$myRequest({
					url: "course/open_lock",
					type: "post",
					showToast: 1,
					data: {lesson_password:this.lesson_password,lesson_id:this.lesson_id},
				});
				if(res.code) {
					this.lesson_lock = 'open'
					this.get_course()
				}
			},
			// 时间转换
			convertToTime(item) {
				const { start_date, end_date } = item;
				return `${start_date}-${end_date}`
			},
			
			/**
			 * 关闭证书弹框
			 */
			handleCertClose() {
				!!this.$refs.certPopup && this.$refs.certPopup.close()
			},
			
			/**
			 * 查看证书
			 */
			handleCertDetail() {
				console.log('row--------', this.row);
				
				this.handleCertClose();
				this.jumpUrl('/exam/pages/room/certificate')
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		padding-bottom: 20rpx;
		
		.navbar_top{
			z-index: 1000;background-color: red;position: relative;
			.uv-navbar{
				position: fixed;
				width: 100%;
				max-width: 1600rpx;
			}
		}
		.d_box{
			// #ifdef WEB
			padding-top: 44px;
			// #endif
			
			position: fixed;
			width: 100%;
			max-width: 1600rpx;
			z-index: 10;
			background-color: #FFF;
			.kc_box{
				// 播放
				.video_box{
					width: 100%;
					display: sticky;
					#myVideo{
						width: 100%;
						height: 36vh;
						max-height: 1600rpx;
					}
					.file_type2_box{
						height: 36vh;
						display: flex;
						flex-direction: column;
						justify-content: center;
						.video_card{
							margin: 0 40rpx;
							border: 1px solid #e0e0e0;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							padding: 20rpx 40rpx;
							cursor: pointer;
							.card_l{
								margin-right: 20rpx;
								image{
									width: 100rpx;height: 100rpx;
								}
							}
							.card_r{
								font-size: 28rpx;
								color: #353535;
							}
						}
						
					}
				}
				// 音频box
				.audio_box{
					display: flex;
					justify-content: center;
					margin: 40rpx 0;
				}
				// 文章box
				.text_box{
					padding: 20rpx;
					width: 100%;
				}
				// PDFbox
				.pdf_box{
					width: 100%;
					.pdf_iframe{
						height: 60vh;
					}
				}
				// PDF卡片
				.pdf_card{
					margin: 40rpx 40rpx;
					border: 1px solid #e0e0e0;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					padding: 20rpx 40rpx;
					cursor: pointer;
					.card_l{
						margin-right: 20rpx;
						image{
							width: 100rpx;height: 100rpx;
						}
					}
					.card_r{
						font-size: 28rpx;
						color: #353535;
					}
				}
			}
			.kc_none{
				text-align: center;
				padding: 0rpx 0;
				image{
					width: 100%;
				}
				
				.lesson_password{
					margin: 50rpx auto 0;
					color: #61666d;
					font-size: 28rpx;
					width: 400rpx;
					display: flex;
					align-items: center;
				}
				.none_text{
					margin: 20rpx auto 0;
					color: #61666d;
					font-size: 28rpx;
					width: 200rpx;
				}
			}
			// 分段器
			.subsection_box{
				// background-color: #FFF;
			}
		}
		
		.d_box_video{
			width: 100%;
			max-width: 1600rpx;
			height: calc(36vh + 32px);
		}
		.d_box_text{
			width: 100%;
			max-width: 1600rpx;
			height: calc(32px);
		}
		
		// box1
		.box1{
			background-color: #FFF;
			.title_box{
				// display: flex;
				// align-items: center;
				padding: 20rpx;
				.title_text{
					font-size: 32rpx;
					font-weight: bold;
				}
				.course_other{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.course_num{
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
					.course_kaoshi{
						color: #FFF;
						font-size: 26rpx;
						background-color: crimson;
						border-radius: 8rpx;
						padding: 8rpx 20rpx;
					}
				}
				
			}
			.author_box{
				display: flex;
				align-items: center;
				padding: 20rpx;
				.author_l{
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}
				.author_r{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					height: 120rpx;
					.name_box{
						display: flex;
						align-items: center;
						.author_name{
							margin-right: 10rpx;
						}
						.author_num{
							font-size: 24rpx;
							color: rgb(48, 49, 51);
						}
					}
					.author_btn{
						border: 1px solid rgb(239,90,96);
						color: rgb(239,90,96);
						border-radius: 8rpx;
						padding: 6rpx 10rpx;
						text-align: center;
						font-size: 26rpx;
						width: 160rpx;
					}
				}
			}
			// 课程介绍
			.course_box{
				padding: 20rpx;
				.course_title{
					display: flex;
					align-items: center;
					border-bottom: 1px dashed #ccc;
					padding-bottom: 10rpx;
					.title_icon{
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.title_text{
						font-size: 32rpx;
						color: #1d1d1d;
						font-weight:bold;
					}
				}
				.course_info{
					font-size: 30rpx;
					padding: 10rpx 10rpx;
					color: #333;
				}
			}
		}
		// box2
		.box2{
			.course_box{
				padding: 20rpx;
				.course_title{
					display: flex;
					align-items: center;
					border-bottom: 1px solid #ccc;
					padding-bottom: 10rpx;
					.title_icon{
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.title_text{
						margin-left: 10rpx;
						font-size: 32rpx;
						color: #1d1d1d;
						font-weight: bold;
					}
				}
				// 章节列表
				.course_list{
					.course_item{
						display: flex;
						align-items: center;
						width:85%;
						margin-top: 20rpx;
						border-bottom: 1px dashed #ccc;
						padding-bottom: 20rpx;
						.course_img{
							margin-right: 20rpx;
							image{
								width: 37vw;
								height: 30vw;
								max-width: 400rpx;
								max-height: 300rpx;
							}
						}
						.item_tag{
							max-width: 120rpx;
							width: 100%;
							border: 1px solid #b1b1b1;
							border-radius: 8rpx;
							color: #656565;
							margin-right: 16rpx;
							padding: 2rpx 10rpx;
							font-size: 24rpx;
							text-align: center;
							display: flex;
							align-items: center;
							image{
								width: 30rpx;height: 30rpx;
								margin-right: 8rpx;
							}
						}
						.lock{
							image{
								width: 40rpx;height: 40rpx;
								margin-right: 8rpx;
							}
						}
						.item_title{
							color: #333;
						}
						.item_status {
						    font-size: 12px;
						    color: #666;
						    margin-top: 5px;
						}
						
						.status_0 {
						    color: #999; /* 未开始 */
						}
						
						.status_1 {
						    color: #4CAF50; /* 进行中 */
						}
						
						.status_2 {
						    color: #F44336; /* 已结束 */
						}
					}
				}
			}
			
		}
		// box3
		.box3{
			.push_box{
				margin: 20rpx;
				.push_btn{
					margin-top: 40rpx;
				}
			}
			.msg_box{
				padding: 20rpx;
				.msg_title{
					display: flex;
					align-items: center;
					border-bottom: 1px solid #333;
					padding-bottom: 15rpx;
					.title_icon{
						width: 40rpx;
						height: 40rpx;
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.title_text{
						margin-left: 10rpx;
						font-size: 32rpx;
						color: #1d1d1d;
					}
				}
				.push_list{
					padding: 20rpx 0;
					.push_item{
						display: flex;
						margin-top: 20rpx;
						padding-bottom: 20rpx;
						border-bottom: 1px dashed #ccc;
						.item_img{
							margin-right: 20rpx;
							image{
								width: 100rpx;
								height: 100rpx;
							}
						}
						.item_t{
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.item_content{
								font-size: 28rpx;
								.username{
									color: #61666d;
									font-size: 24rpx;
								}
								.content{
									color: #18191C;
									text-indent: 1em;
									margin-top: 10rpx;
								}
							}
							.item_time{
								text-align: right;
								font-size: 24rpx;
								color: #909399;
							}
						}
					}
				}
			}
		}
		// 底部板块
		.bottom_box{
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			width: 100%;
			max-width: 1600rpx;
			height: 80rpx;
			// border-top: 1px solid #dadbde;
			z-index: 100;
			background-color: #f2f2f2;
			
			.bottom_box_warp{
				display: flex;
				align-items: center;
				justify-content: center;
				
				.bottom_box_l{
					color: #989898;
					background-color: #FFF;
					font-size: 34rpx;
					width:50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						display: flex;
						align-items: center;
						color: #f5454d;
						cursor: pointer;
						// width: 50rpx;height: 50rpx;margin-right: 10rpx;
						// image{
						// 	width: 50rpx;height: 50rpx;
						// }
					}
				}
				.bottom_box_r{
					background-color: #4673EA;
					color: #FFF;
					width: 80%;
					font-size: 34rpx;
					text-align: center;
					line-height: 80rpx;
					border-radius: 40rpx;
				}
			}
			.bottom_box_zw{
				background-color: #FFF;
				height: env(safe-area-inset-bottom);
			}
			
		}
		// 考试弹出层
		.test_warp{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			.test_box{
				width: 80%;
				height: 40vh;
				background: #FFF;
				position: relative;
				border-radius: 6rpx;
				.test_close{
					position: absolute;
					top: -18rpx;
					right: -18rpx;
					background-color: #FFF;
					border-radius: 50%;
				}
				.test_list{
					padding: 40rpx;height: 40vh;overflow-y: scroll;
					.test_item{
						display: flex;
						align-items: inherit;
						border-bottom: 2rpx dashed #989898;
						padding-bottom: 20rpx;
						margin-top: 20rpx;
						.item_l{
							margin-right: 20rpx;
							image{
								width: 40rpx;height: 40rpx;
							}
						}
					}
					.test_item:last-child{
						border-bottom: none;
					}
				}
			}
		}
	}
	
	.cert-content {
		padding: 40rpx 40rpx 0 40rpx;
		background-color: white;
		
		.btn-close {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			font-size: 30rpx;
			padding: 20rpx;
		}
		
		.top {
			.icon {
				color: #22BF22;
				font-size: 40rpx;
				margin-right:10rpx;
			}
			
			.text {
				font-weight: bold;
			}
		}
		
		.center {
			padding: 20rpx 10rpx 40rpx 40rpx;
			color: gray;
			font-size: 28rpx;
		}
		
		.bottom {
			border-top: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 10rpx;
			.btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				cursor: pointer;
				color: #4673EA;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
</style>